iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

一步一腳印,我的前端工程師修煉系列 第 19

Day 19 | 運算子和控制語法學習心得

  • 分享至 

  • xImage
  •  

前言
接下來這篇是關於很基本的運算子做一點心得分享,也只會挑幾個需要特別的來說明。另外,最重要的是控制語法 (迴圈),這在任何一種程式語言,必定都會有的,只是各個程式語言在名稱稍微有點差異這樣。哪….最後如果有寫錯或是語意不清,再請各位不吝惜指教,謝謝。

運算子
在運算子這裡我們整理出有算數運算子、指派運算子、比較運算子、邏輯運算子及最後又不歸在前面幾類的其它運算子,由於這些很基本,也不需要一一介紹,會針對比較特別及需注意的部份來做分享。

算數運算子
加法運算子:要注意的是會因為資料型別的不同而有不同的結果,最常見的是數值 (Number) 與字串 (String) 的誤會,導致了預期之外的結果。

範例 1
遞增運算子 (++) 與遞減運算子 (--):遞增及遞減運算子都是對運算元執行加 1 或減 1 的計算,請看以下範例說明。

範例 2
這裡要說明的是根據以上的範例二,我們可以得知遞增或遞減運算子各別放在運算元前 / 後時,其運算的結果是會不同的。

Example 1:y = x++ 是先將變數 x 帶入變數 y 時,變數 x 自己才執行遞增運算。
Example 2:變數 x 會先執行遞增運算之後,再將結果帶入到變數 y,所以會跟 Example 1 的結果不同。
所以,若是不了解上面兩者差異,最後的結果是會得到預期之外的結果的。又或者可以利用一些 debugger 工具來檢查也是較為建議的。

比較運算子
比較運算子在撰寫任何一個程式語言時,都會很常使用到的語法,它會比較該運算子左邊及右邊的值,並且回傳 true 或 false 的比較結果。哪一般來說會搭配 if、do…while、while 等迴圈語法使用。以下會分享常見的比較運算子。

相等運算子:「==」 左邊與右邊的值相等時會回傳 true

嚴格的相等運算子:「===」左邊與右邊的值相等且資料型別相同時會回傳 true

範例 3
由範例三得知,會建議在撰寫大型專案時,由於 JavaScript 對型別的彈性度較大會容易造成額外的問題,也避免 debugger 到天荒地老,因此在針對數值去比較時會建議採用 「===」運算子。

條件運算子:「?:」「條件式? 程式一 : 程式二」。條件如果為 true 時會回傳程式一,false 時會回傳程式二。

範例 4
邏輯運算子
邏輯運算子在撰寫任何一個程式語言時,也都會是很常使用到的語法,用來結合多個條件式來回傳 true 或 false,更常與上面的比較運算子搭配使用,來符合較複雜的商業邏輯或條件式。

&&:左右兩邊的運算式皆為 true 時,回傳 true。

||:左右兩邊的運算式,只要有一個為 true 就回傳 true。

!:運算式的運算結果為 false,回傳 true。

範例 5
其它運算子
這裡會介紹很常用的 delete 跟 typeof 運算子。

delete 運算子:delete 運算子它可以刪除我們運算元中設定的變數、陣列標籤又或是物件屬性,刪除成功的時候會回傳 true,反之刪除失敗時,則回傳 false,請看以下範例說明。

範例 6
Sample 1:運用 delete 運算子刪除陣列標籤只會刪除該特定標籤,整個索引值也不會該變。
Sample 3:運用 delete 運算子刪除,很明確的使用宣告指令宣告的變數,也是無法刪除的,反之,Sample 4 的範例中,運用 delete 運算子刪除,是沒有問題的。
typeof 運算子:可以運用此 typeof 運算子,回傳我們指定的變數資料型別,請看以下範例說明。

範例 7
由上面範例可以得知,運用 typeof 運算子可以區分出 number、string、boolean 等等基本資料型別,但是 array、object 都只會回傳 object。

控制語法
if 條件判斷
if 指令的意思是「若…就…,否則就…」,依給予的條件為 true 或 false 執行不同的指令區塊,其指令用法與範例如下。

範例 8
由上面的範例可以得知,

分數為大於或等於 80:會執行「Vita 分數大於 80 分」。
分數小於 80:會執行「Vita 考很差」。
另外,若只想在分數為大於或等於 80 才印出 console.log 內的資訊,則可以省略 else 區塊,其範例如下。

範例 9
else if 的多條件分支,利用此特性我們可以表達多種條件的情況,其指令用法與範例如下。

範例 10
switch 條件判斷
switch 指令用法,我個人認為在解決,當使用 if else 語法時,所要判斷的判斷式過多,造成整個程式過於攏長及不好閱讀,其指令用法與範例如下。

範例 11
透過上面的範例介紹,switch 指令的處理流程如下:

首先會先計算最前面的條件式。
執行比較結果為 true 的 case 區塊。
若沒有符合的 case,則會呼叫最後的 default。


上一篇
Day 18 | 變數和資料型別學習心得
下一篇
Day 20 | 撰寫易讀且好維護的程式,程式設計規範
系列文
一步一腳印,我的前端工程師修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言